<template>
	<view class="app-goods-price">
		<!-- 10.14添加 -->
		<!-- <view class="goods-subtitle skefu dir-left-nowrap main-between cross-center">
			<view class="">
				去实体店体验
			</view>
			<view class="box-grow-0 custom" @click="custom">
				<image src="/static/image/kefu.png"></image>
			</view>
		</view> -->
		<!-- 10.8 去实体店体验 换为 抵金币抵后价 -->
		<!-- <view class="t-omit-three">去实体店体验</view> -->
		<!-- 10.12 金币白条可抵 -->
		<!-- <view class="goods-subtitle main-between cross-center">
			<view class="gold-coin" v-if="!ishj && mall_id == 1">
				金币最高可抵{{goods.original_discount_price1}}元
			</view>
			<view class="gold-coin" v-if="!ishj && mall_id == 1">
				抵后价{{goods.original_price-goods.original_discount_price1}}元
			</view>
			<view class=""></view>

			<view class="box-grow-0 share" @click="shareClick">
				<image src="../../../static/image/icon/icon-share.png"></image>
				<view>分享</view>
			</view>
		</view> -->
		<view class="top dir-left-nowrap" v-if="ispingtai">
			<view v-if="goods.is_negotiable && goods.is_negotiable === 1" class="box-grow-1 cross-center negotiable"
				:class="theme + '-m-text ' + theme">
				价格面议
			</view>

			<view class="box-grow-1" v-else>
				<!-- 20220124 -->
				<!-- 10.12 金币白条可抵 -->
				<!-- <view class="goods-subtitle main-between cross-center" v-if="!ishj && mall_id == 1">
					<view class="gold-coin">
						金币最高可抵{{goods.original_discount_price1}}元
					</view>
					<view class="gold-coin">
						抵后价{{goods.original_price-goods.original_discount_price1}}元
					</view>
					<view class=""></view>
				</view> -->
				<view v-if="goods.level_show === 1">
					<view class="dir-left-nowrap cross-bottom">
						<view class="price box-grow-0" style="color: #f39800;">
							<app-price :max="`${goodsPrice.max}`" :min="`${goodsPrice.min}`"
								:default-price="`${goodsPrice.price}`" :theme="theme"></app-price>
						</view>
						<!-- <view v-if="is_show_member" class="app-member-mark">
							<app-member-mark :theme="theme"></app-member-mark>
						</view> -->
						<!-- <view>
							<app-sup-vip v-if="discount" :is_vip_card_user="is_vip_card_user" margin="0 0 0 13rpx"
								:discount="discount"></app-sup-vip>
						</view> -->
					</view>
					<view class="dir-left-nowrap cross-bottom">
						<view v-if="isUnderlinePrice == 1 && sign !== 'exchange'"
							:class="theme + '-m-text box-grow-0 member-price ' + theme">
							<template v-if="sign === 'flash_sale'">
								<app-price :max="goodsPrice.price_max" :min="goodsPrice.price_min"
									type="text-price-all"></app-price>
							</template>
							<template v-if="sign === 'goods'">
								<app-price :price="`${goodsPrice.original_price}`" type="text-price-all"></app-price>
							</template>
						</view>
						<!-- <view class="sales" v-if="goods.is_sales === 1">销量{{goods.sales}}{{goods.unit}}</view>
						<view class="stock" v-if="sign === 'exchange'">库存{{goods.goods_stock}}{{goods.unit}}</view> -->
					</view>
				</view>
				<!-- 11.10 注释 修改市场价为双熙堂实体店成交价 不加中划线 -->
				<!-- <view v-else>
					<view class="dir-left-nowrap cross-bottom">
						<view :class="theme + '-m-text price ' + theme" style="">
							<app-price text="定金" :theme="theme" :max="`${goodsPrice.max}`" :min="`${goodsPrice.min}`"
								:default-price="`${goodsPrice.defaultPrice}`"></app-price>
						</view>
						<view v-if="isUnderlinePrice == 1 && sign !== 'exchange'" class="origin-price">
							<app-price text="全款" :price="`${goodsPrice.original_price}`" type="text-price-all">
							</app-price>
						</view>
					</view>
					<view class="dir-left-nowrap cross-bottom">
						<view class="cost">双熙堂实体店成交价<text>{{goods.cost_price}}</text></view>
					</view>
				</view> -->
				<view v-else>
					<view class="dir-left-nowrap cross-bottom" v-if="goods.is_cost_price == 1">
						<!-- 11.10 修改市场价为双熙堂实体店成交价 不加中划线 -->
						<view class="cost" style="text-decoration: line-through;" :class="theme + '-m-text ' + theme">
							双熙堂实体店成交价<text>￥{{goods.cost_price}}</text></view>
						<!-- <view class="sales" v-if="goods.is_sales === 1">销量{{goods.sales}}{{goods.unit}} {{goods.is_cost_price }}</view>
						<view class="stock" v-if="sign === 'exchange'">库存{{goods.goods_stock}}{{goods.unit}}</view>  -->
					</view>

					<view class="dir-left-nowrap cross-bottom" v-if="isUnderlinePrice == 1 && sign !== 'exchange' && goods.is_original_price ==1" >
						<view class="cost" style="color: #ff3131;">双熙堂线上成交价<text>￥{{goodsPrice.original_price}}</text>
						</view>
					</view>
					<view class="dir-left-nowrap cross-bottom">
						<view class="cost fontwei" :class="theme + '-m-text' + theme" style="color: #ff4544;">
							定金<text>￥{{goodsPrice.defaultPrice}}</text>
						</view>
						<!-- #ff4544 -->
						<!-- <view>
							<app-sup-vip v-if="discount" :is_vip_card_user="is_vip_card_user" margin="0 0 0 13rpx"
								:discount="discount"></app-sup-vip>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 20220124 -->
			<view class="" style="text-align: center;">
				<view class="box-grow-0 custom" @click="custom">
					<image src="/static/image/kefu.png"></image>
				</view>
				<view class="box-grow-0 share" @click="shareClick">
					<image src="../../../static/image/icon/icon-share.png"></image>
					<view>分享</view>
				</view>
			</view>


			<view>
				<app-goods-quick-share v-model="quickShareShow" @quickShare="quickShare" :goods="goods">
				</app-goods-quick-share>
			</view>

			<view>
				<app-share-qr-code v-model="shareShow" :url="newShareUrl" :goods="goods" :poster-config="posterConfig"
					:poster-generate="posterGenerate" :has-poster-nav="hasPosterNav"></app-share-qr-code>
			</view>

		</view>
		<view class="top dir-left-nowrap" v-else>
			<view v-if="goods.is_negotiable && goods.is_negotiable === 1" class="box-grow-1 cross-center negotiable"
				:class="theme + '-m-text ' + theme">
				价格面议
			</view>
			<view class="box-grow-1" v-else>
				<view v-if="goods.level_show === 1">
					<view class="dir-left-nowrap cross-bottom">
						<view class="price box-grow-0" style="color: #f39800;padding: 20rpx 0;">
							<app-price text="售价" :max="`${goodsPrice.max}`" :min="`${goodsPrice.min}`"
								:default-price="`${goodsPrice.price}`" :theme="theme"></app-price>
						</view>
						<!-- <view v-if="is_show_member" class="app-member-mark">
							<app-member-mark :theme="theme"></app-member-mark>
						</view> -->
					</view>
					<view class="dir-left-nowrap cross-bottom">
						<view v-if="isUnderlinePrice == 1 && sign !== 'exchange'"
							:class="theme + '-m-text box-grow-0 member-price ' + theme">
							<template v-if="sign === 'flash_sale'">
								<app-price text="原价" :max="goodsPrice.price_max" :min="goodsPrice.price_min"
									type="text-price-all"></app-price>
							</template>
							<template v-if="sign === 'goods'">
								<app-price text="原价" :price="`${goodsPrice.original_price}`" type="text-price-all">
								</app-price>
							</template>
						</view>
					</view>
					
				</view>
				
				<view v-else>
					<!-- <view class="dir-left-nowrap cross-bottom">
						<view :class="theme + '-m-text price ' + theme" style="font-family: DIN;">
							<app-price :max="`${goodsPrice.max}`" :min="`${goodsPrice.min}`"
								:default-price="`${goodsPrice.defaultPrice}`"></app-price>
						</view>
						<view v-if="isUnderlinePrice == 1 && sign !== 'exchange'" class="origin-price">
							<app-price :price="`${goodsPrice.original_price}`" type="text-price-all"></app-price>
						</view>
					</view> -->
					<view class="dir-left-nowrap cross-bottom">
						<view class="cost" style="text-decoration: line-through;" :class="theme + '-m-text ' + theme">
							原价<text>￥{{goods.original_price}}</text></view>
					</view>
					
					<view class="dir-left-nowrap cross-bottom">
						<view class="cost fontwei" :class="theme + '-m-text ' + theme">
							售价<text v-if="goodsPrice.use_attr == 1 && goodsPrice.min != goodsPrice.max">
								￥{{goodsPrice.min}} ~ ￥{{goodsPrice.max}}
							</text> <text v-else-if="goodsPrice.use_attr == 1 && goodsPrice.min == goodsPrice.max">
								￥{{goodsPrice.min}}
							</text> <text v-else>￥{{goodsPrice.defaultPrice}}</text>
							<!-- 金币可以抵用 -->
							<text class="jinbi" style="font-size: 24rpx; color:#E4432E; margin-left: 8rpx;" v-if="goods.forehead_integral !== '0.00'">金币可抵用￥{{goods.forehead_integral}}</text>
						</view>			
									
					</view>
					
				</view>
			</view>

			<view class="" style="text-align: center;">
				<view class="box-grow-0 custom" @click="custom">
					<image src="/static/image/kefu.png"></image>
				</view>
				<view class="box-grow-0 share" @click="shareClick">
					<image src="../../../static/image/icon/icon-share.png"></image>
					<view>分享</view>
				</view>
			</view>


			<view>
				<app-goods-quick-share v-model="quickShareShow" @quickShare="quickShare" :goods="goods">
				</app-goods-quick-share>
			</view>

			<view>
				<app-share-qr-code v-model="shareShow" :url="newShareUrl" :goods="goods" :poster-config="posterConfig"
					:poster-generate="posterGenerate" :has-poster-nav="hasPosterNav"></app-share-qr-code>
			</view>

		</view>
		<!-- 11.10 分享人数及原因 -->
		<!-- <view class="sharec" @click="jump('/pages/goods/sharegold/sharegold')">
			<view class="sharenum">
				需分享人数{{sharecon.sharenum}}可用分享价格购买
			</view>
			<view class="goods-subtitle">
				分享原因{{sharecon.sharebtitle}}
			</view>
		</view> -->
		<!-- 11.12 分享人数及原因 -->
		<view class="sharec" v-if="goods.params.isshare && goods.params.isshare == 1"
			@click="jump('/pages/goods/sharegold/sharegold?sharecon='+JSON.stringify(goods.params)+'&goodsid='+goods.id+'&goodsharepic='+goods.app_share_pic+'&goodsharetitle='+goods.app_share_title+'&mall_id='+goods.mall_id)">
			<view class="sharecon">
				{{goods.params.sharebtitle}}
			</view>
			<view class="sharenum">
				点击分享{{goods.params.sharenum}}人可用线上成交价格购买,便宜{{goods.cost_price - goodsPrice.original_price}}元
			</view>
			<!-- <view class="sharenum">
				便宜{{goods.cost_price - goodsPrice.original_price}}元
			</view> -->
			<view class="sharebtn">
				点击转发>>>
			</view>
		</view>
		<!-- 会员 -->
		<!-- <view v-if="goods.level_show === 2 && goods.is_negotiable === 0">
			<app-join-member :member-max-price="`${goods.price_member_max}`"
				:member-min-price="`${goods.price_member_min}`" :price="`${goods.price}`"></app-join-member>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appPrice from '../goods/app-price.vue';
	import appMemberMark from '../../page-component/app-member-mark/app-member-mark.vue';
	import appShareQrCode from '../../page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
	import appJoinMember from "../../page-component/app-join-member/app-join-member.vue";
	import appGoodsQuickShare from '../goods/app-goods-quick-share.vue';

	export default {
		components: {
			'app-price': appPrice,
			'app-member-mark': appMemberMark,
			'app-share-qr-code': appShareQrCode,
			'app-join-member': appJoinMember,
			appGoodsQuickShare
		},
		props: {
			ispingtai: { // 是否是平台商品（true 平台 ； false 接龙）
				type: Boolean,
				default () {
					return true
				},
			},
			posterConfig: String,
			posterGenerate: String,
			hasPosterNav: {
				type: Boolean,
				default () {
					return false
				},
			},
			goods: Object,
			is_vip_goods: {
				type: Number,
				default () {
					return 0;
				}
			},
			discount: {
				type: String,
				default () {
					return null;
				}
			},
			selectAttr: {
				type: Object,
				default () {
					return {};
				}
			},
			shareUrl: {
				type: String,
				default () {
					return '';
				}
			},
			is_vip_card_user: {
				type: Number,
				default () {
					return 0
				}
			},
			theme: String,
			is_show_member: {
				type: Boolean,
				default () {
					return true;
				}
			},
			sign: {
				type: String,
				default () {
					return 'goods';
				}
			},
			// 11.10 分享几人可用分享价
			// sharecon: {
			// 	type: Object
			// },
			// 11.12 是否黄金
			ishj: {
				type: Boolean,
				default () {
					return false;
				}
			},
			mall_id: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				quickShareShow: false,
				shareShow: false
			};
		},
		computed: {
			...mapState({
				isUnderlinePrice: state => state.mallConfig.mall.setting.is_underline_price,
			}),
			goodsPrice() {
				if (!this.goods) return {};
				let {
					price_member_max,
					price_member_min,
					price,
					price_max,
					price_min,
					original_price,
					use_attr
				} = this.goods;
				let data = {};
				if (this.goods.level_show === 1) {
					if (this.ispingtai) {
						data = {
							max: price_member_max,
							min: price_member_min,
							defaultPrice: price,
							original_price: price,
							price_max: price_max,
							price_min: price_min,
							use_attr: use_attr
						};
					} else {
						data = {
							max: price_member_max,
							min: price_member_min,
							defaultPrice: price,
							original_price: original_price,
							price_max: price_max,
							price_min: price_min,
							use_attr: use_attr
						};
					}
				} else {
					data = {
						max: price_max,
						min: price_min,
						defaultPrice: price,
						original_price: original_price,
						use_attr: use_attr
					}
				}
				return data;
			},
			newShareUrl() {
				if (this.shareUrl) {
					return this.shareUrl;
				} else {
					if (this.goods) {
						return this.$api.poster.goods + '&goods_id=' + this.goods.id;
					} else {
						return ``;
					}
				}
			}
		},
		methods: {
			jump(item) {
				uni.navigateTo({
					url: item
				})
			},
			quickShare(e) {
				this.$emit('quickShare', e);
			},
			custom() {
				// 9.8 修改客服 9.14
				if (wx.openCustomerServiceChat) {
					wx.openCustomerServiceChat({
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfc2132bcfa45f0fb28'
						},
						corpId: 'ww4e635c5ebdf96587',
						showMessageCard: true,
						sendMessageTitle: this.goods.name,
						// sendMessagePath: '/pages/goods/goods?id=' + this.goods.id + '&mall_id=' + this.mall_id
						// `/pages/index/index?scene=share&user_id=${user_id}&params=${JSON.stringify(args.params)}`
					})
				} else {
					uni.showModal({
						title: '版本不支持',
						content: '请下载最新版本微信',
						showCancel: false,
						confirmText: '我知道了'
					})
				}
			},
			shareClick() {
				// 判断登入
				if (!this.$user.isLogin()) {
					this.$user.getInfo().then(() => {});
				} else {
					if (this.goods.extra_quick_share) {
						this.quickShareShow = true;
					} else {
						this.shareShow = true;
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.line-through {
		text-decoration: line-through #000;
	}

	// 11.10 分享
	.sharec {
		// padding-bottom: 24rpx;
		// background-color: #ff4544;
		padding: 12rpx;
		background-color: #945a21;
		color: #FFFFFF;
		border-radius: 16rpx;
		width: 702rpx;
		margin: 0 auto;
		font-size: 32rpx;
		text-align: center;
		line-height: 52rpx;

		.sharenum {
			// padding-bottom: 24rpx;
			// padding: 24rpx;
		}

		.sharecon {
			// font-size: 24rpx;
		}

		.sharebtn {
			text-align: right;
		}
	}

	.fontwei {
		font-weight: bold;
	}

	// 10.8
	.gold-coin {
		background-color: #fbede4;
		color: #f9793f;
		border-radius: 36rpx;
		font-size: 30rpx;
		padding: 4rpx 24rpx;
	}

	.skefu {
		margin-top: -40rpx;
	}

	.goods-subtitle {
		font-size: 24rpx;
		background-color: #ffffff;
		color: #999999;
	}

	.custom {
		// margin-top: #{16rpx};
		font-size: $uni-font-size-weak-two;
		color: $uni-general-color-one;

		image {
			// width: 136rpx;
			// height: 136rpx;
			width: 60rpx;
			height: 60rpx;
			// margin-bottom: #{10rpx};
		}
	}

	.vip-price {
		width: #{148upx};
		height: #{27upx};
		margin-left: #{13rpx};

		.item {
			height: #{27upx};
			width: 50%;
		}

		.left {
			border-top-left-radius: #{13upx};
			border-bottom-left-radius: #{13upx};
			background-color: #4e4040;
			position: relative;
		}

		.right {
			border-top-right-radius: #{13upx};
			border-bottom-right-radius: #{13upx};
			background: linear-gradient(45deg, #edc9a8, #fdebde);
			font-size: #{18upx};
			line-height: #{27upx};
			text-align: center;
			color: #4e4040;
		}

		.vip-icon {
			width: #{51upx};
			height: #{14upx};
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.app-goods-price {
		padding: 0 #{24rpx};
		background-color: #ffffff;

		.top {
			padding-bottom: #{24rpx};

			.price {
				font-size: #{56rpx};
				line-height: 1;

				/* color: #fff;
				background: #342B2A; */
				color: #342B2A;
				padding: 20rpx;
				height: 96rpx;
				font-weight: 600;
			}

			.member-img {
				width: #{94rpx};
				height: #{40rpx};
				margin-left: #{16rpx};
			}

			.origin-price {
				height: 96rpx;
				padding: 20rpx;
				/* color: #fff;
				background: #EB5757; */
				// color: #EB5757;
				font-size: #{56rpx};
				line-height: 1;
				/* text-decoration: line-through;
				margin-left: #{20rpx};
				color: $uni-general-color-two;
				font-size: $uni-font-size-general-one; */
			}

			.cost {
				// color: #EB5757;
				font-size: 32rpx;
				// text-decoration: line-through;
				// margin-top: #{22rpx};
				margin-top: 6rpx;

				// text::before {
				// 	content: '￥';
				// 	font-size: 60%;
				// }
			}

			.sales {
				color: $uni-general-color-two;
				font-size: $uni-font-size-weak-one;
				margin-top: #{22rpx};
			}

			.stock {
				color: $uni-general-color-two;
				font-size: $uni-font-size-weak-one;
				margin-top: #{22rpx};
				margin-left: #{10rpx};
			}

			.app-member-mark {
				margin-left: #{12rpx};
			}

			.member-price {
				font-size: $uni-font-size-import-two;
				margin-right: #{20rpx};
				line-height: 1;
			}

			.negotiable {
				font-size: #{48rpx};
			}
		}

		.share {
			// margin-top: #{16rpx};
			font-size: $uni-font-size-weak-two;
			// color: $uni-general-color-one;
			color: $uni-important-color-red;

			image {
				width: #{40rpx};
				height: #{40rpx};
				// margin-bottom: #{10rpx};
			}
		}
	}
	
</style>
